<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <!-- development version, includes helpful console warnings -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <!-- production version, optimized for size and speed -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
    <div id='my-slots-demo'>
        <parent-component>使用者传入的内容</parent-component>
    </div>
</body>
<script>
    Vue.component('my-component', {
        template: '<div>\
  <h2>我是子组件的标题</h2>\
  <slot>\
    只有在没有要分发的内容时才会显示。\
  </slot>\
</div>',
    });

    Vue.component('parent-component', {
        template: '<div>\
  <h1>我是父组件的标题</h1>\
  <my-component>\
  </my-component>\
</div>',
    });

    new Vue({
        el: '#my-slots-demo',
        data: {
            message: 'init data'
        }
    })
</script>


</html>